<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>考试之路 - 人生肉鸽卡牌游戏</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div id="game-container">
        <!-- 主菜单 -->
        <div id="main-menu" class="screen active">
            <div class="menu-content">
                <h1 class="game-title">考试之路</h1>
                <p class="game-subtitle">人生就是一场场考试</p>
                <div class="character-selection">
                    <h2>选择你的角色</h2>
                    <div class="character-cards">
                        <div class="character-card" data-character="xu">
                            <div class="character-avatar">
                                <img src="image/role/xu_1.jpg" alt="旭" class="character-img">
                            </div>
                            <h3>旭</h3>
                        </div>
                        <div class="character-card" data-character="ling">
                            <div class="character-avatar">
                                <img src="image/role/ling_1.jpg" alt="玲" class="character-img">
                            </div>
                            <h3>玲</h3>
                        </div>
                        <div class="character-card" data-character="che">
                            <div class="character-avatar">
                                <img src="image/role/che_1.jpg" alt="澈" class="character-img">
                            </div>
                            <h3>澈</h3>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 12px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;">
                    <div style="display:flex; gap:6px; align-items:center;">
                        <label for="seed-input">Seed:</label>
                        <input id="seed-input" type="number" placeholder="留空随机" style="width:140px; padding:4px;" />
                        <button id="seed-random" class="btn-small" title="随机生成种子">🎲</button>
                        <button id="seed-copy" class="btn-small" title="复制当前种子" style="display:none;">📋</button>
                    </div>
                    <button id="start-game" class="btn-primary" disabled>开始游戏</button>
                    <button id="view-logs" class="btn-secondary">查看记录</button>
                </div>
                <div class="difficulty-selector">
                    <button id="difficulty-prev" class="btn-small" title="上一个进阶">◀</button>
                    <span class="difficulty-label">进阶 <span id="difficulty-current-label">I</span></span>
                    <button id="difficulty-next" class="btn-small" title="下一个进阶">▶</button>
                    <span class="difficulty-note">已解锁至 <span id="difficulty-max-label">I</span></span>
                </div>
            </div>
        </div>

        <!-- 地图界面 -->
        <div id="map-screen" class="screen">
            <div class="map-header">
                <div class="player-info">
                    <div class="player-avatar-container">
                        <img id="map-player-avatar" src="" alt="角色头像" class="player-avatar">
                    </div>
                    <div class="player-stats">
                        <span class="health">❤️ <span id="map-player-health">100</span></span>
                        <span class="energy">⚡ <span id="map-player-energy">3</span></span>
                        <span class="gold">💰 <span id="map-player-gold">0</span></span>
                    </div>
                    <div class="potion-section">
                        <span class="potions-label">🧪 药水:</span>
                        <div id="map-potions-display" class="potions-display">
                            <!-- 药水将在这里显示 -->
                        </div>
                    </div>
                    <div class="relic-section">
                        <span class="relics-label">⚡ 遗物:</span>
                        <div id="map-relics-display" class="relics-display">
                            <!-- 遗物将在这里显示 -->
                        </div>
                    </div>
                    <div class="floor-info">
                        <span>第 <span id="map-current-floor">1</span> 层</span>
                    </div>
                    <div class="difficulty-badge">进阶 <span id="map-difficulty-label">I</span></div>
                </div>
                <div class="map-actions">
                    <button class="btn-small" id="map-deck-view">📚 卡牌包</button>
                    <button class="btn-small" id="map-relics-view">⚡ 遗物</button>
                </div>
            </div>
            
            <div class="map-content">
                <h2 class="map-title">考试之路</h2>
                <div id="map-container" class="map-container">
                    <!-- 地图节点将在这里显示 -->
                </div>
                <div class="map-legend">
                    <div class="legend-item">
                        <div class="legend-icon battle-icon"></div>
                        <span>战斗</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon elite-icon"></div>
                        <span>精英</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon boss-icon"></div>
                        <span>Boss</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon hanfu-icon"></div>
                        <span>汉府</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-icon shop-icon"></div>
                        <span>商店</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 游戏主界面 -->
        <div id="game-screen" class="screen">
            <div class="game-header">
                <div class="player-info">
                    <div class="player-avatar-container">
                        <img id="player-avatar" src="" alt="角色头像" class="player-avatar">
                    </div>
                    <div class="player-stats">
                        <span class="health">❤️ <span id="player-health">100</span></span>
                        <span class="energy">⚡ <span id="player-energy">3</span></span>
                        <span class="gold">💰 <span id="player-gold">0</span></span>
                    </div>
                    <div class="potion-section">
                        <span class="potions-label">🧪 药水:</span>
                        <div id="potions-display" class="potions-display">
                            <!-- 药水将在这里显示 -->
                        </div>
                    </div>
                    <div class="relic-section">
                        <span class="relics-label">⚡ 遗物:</span>
                        <div id="relics-display" class="relics-display">
                            <!-- 遗物将在这里显示 -->
                        </div>
                    </div>
                    <div class="floor-info">
                        <span>第 <span id="current-floor">1</span> 层</span>
                    </div>
                    <div class="difficulty-badge">进阶 <span id="battle-difficulty-label">I</span></div>
                </div>
                <div class="game-actions">
                    <button class="btn-small" id="draw-pile-view">📖 抽牌堆</button>
                    <button class="btn-small" id="discard-pile-view">🗑️ 弃牌堆</button>
                    <button class="btn-small" id="exhaust-pile-view">⚰️ 消耗堆</button>
                    <button class="btn-small" id="relics-view">⚡ 遗物</button>
                </div>
            </div>
            <!-- 遗物单独一行显示 -->
            <div class="relics-row">
                <div class="relics-label" style="margin-bottom: 8px;">⚡ 遗物列表:</div>
                <div id="relics-display-full" class="relics-display-full">
                    <!-- 所有遗物将在这里显示 -->
                </div>
            </div>

            <div class="game-content">
                <div class="battle-area">
                    <div class="enemy-area">
                        <div id="enemy-container" class="enemy-container">
                            <!-- 敌人将在这里显示 -->
                        </div>
                    </div>
                    
                    <div class="player-area">
                        <div class="player-avatar-battle">
                            <img id="battle-player-avatar" src="" alt="角色头像" class="player-avatar-battle-img">
                        </div>
                        <div class="player-buffs">
                            <div class="buff-label">状态:</div>
                            <div id="player-status" class="status-container">
                                <!-- 角色状态将在这里显示 -->
                            </div>
                        </div>
                        <div class="hand-container">
                            <div id="player-hand" class="hand">
                                <!-- 手牌将在这里显示 -->
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button id="end-turn-bottom" class="btn-secondary">结束回合</button>
                    </div>
                </div>
                
                <!-- 战斗日志 -->
                <div class="battle-log">
                    <h3>战斗日志</h3>
                    <div id="battle-log-content" class="log-content">
                        <!-- 战斗日志将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 汉府界面 -->
        <div id="hanfu-screen" class="screen">
            <div class="screen-content">
                <h2>汉府 - 休息与锻造</h2>
                
                <!-- 角色状态显示 -->
                <div class="hanfu-player-info">
                    <div class="player-avatar-container">
                        <img id="hanfu-player-avatar" src="" alt="角色头像" class="player-avatar">
                    </div>
                    <div class="player-stats">
                        <span class="health">❤️ <span id="hanfu-player-health">100</span>/<span id="hanfu-player-max-health">100</span></span>
                        <span class="energy">⚡ <span id="hanfu-player-energy">3</span></span>
                        <span class="gold">💰 <span id="hanfu-player-gold">0</span></span>
                    </div>
                    <div class="hanfu-stats-details">
                        <div class="stat-detail">
                            <span>力量: <span id="hanfu-player-strength">0</span></span>
                            <span>敏捷: <span id="hanfu-player-dexterity">0</span></span>
                            <span>智力: <span id="hanfu-player-intelligence">0</span></span>
                        </div>
                        <div class="deck-info-small">
                            <span>卡牌包: <span id="hanfu-deck-count">0</span>张</span>
                            <button class="btn-small" onclick="game.showDeckView()" style="margin-left: 10px;">📚 查看</button>
                        </div>
                        <div class="relic-info-small" style="margin-top: 8px;">
                            <span>遗物: <span id="hanfu-relics-count">0</span>件</span>
                            <button class="btn-small" onclick="game.showRelicsView()" style="margin-left: 10px;">⚡ 查看</button>
                        </div>
                    </div>
                </div>
                
                <div class="hanfu-options">
                    <button class="btn-primary" id="rest-heal">休息恢复 (免费)</button>
                    <button class="btn-primary" id="upgrade-card">升级卡牌 (免费)</button>
                    <button class="btn-primary" id="remove-card">移除卡牌 (免费)</button>
                </div>
                <button class="btn-secondary" id="leave-hanfu">离开汉府</button>
            </div>
        </div>

        <!-- 卡牌升级/移除界面 -->
        <div id="card-upgrade-screen" class="screen">
            <div class="screen-content">
                <h2>选择要升级的卡牌</h2>
                <div class="upgrade-info">
                    <p>花费: 0💰 | 剩余金币: <span id="upgrade-gold">0</span>💰</p>
                </div>
                <div id="upgrade-cards-container" class="cards-container">
                    <!-- 可升级/可移除的卡牌将在这里显示 -->
                </div>
                <div class="upgrade-actions">
                    <button class="btn-secondary" id="cancel-upgrade">取消</button>
                </div>
            </div>
        </div>

        <!-- 事件界面 -->
        <div id="event-screen" class="screen">
            <div class="screen-content">
                <h2 id="event-title">奇遇事件</h2>
                
                <!-- 角色状态显示 -->
                <div class="event-player-info">
                    <div class="player-avatar-container">
                        <img id="event-player-avatar" src="" alt="角色头像" class="player-avatar">
                    </div>
                    <div class="player-stats">
                        <span class="health">❤️ <span id="event-player-health">100</span>/<span id="event-player-max-health">100</span></span>
                        <span class="energy">⚡ <span id="event-player-energy">3</span></span>
                        <span class="gold">💰 <span id="event-player-gold">0</span></span>
                    </div>
                    <div class="event-stats-details">
                        <div class="stat-detail">
                            <span>力量: <span id="event-player-strength">0</span></span>
                            <span>敏捷: <span id="event-player-dexterity">0</span></span>
                            <span>智力: <span id="event-player-intelligence">0</span></span>
                        </div>
                        <div class="deck-info-small">
                            <span>卡牌包: <span id="event-deck-count">0</span>张</span>
                            <button class="btn-small" onclick="game.showDeckView()" style="margin-left: 10px;">📚 查看</button>
                        </div>
                        <div class="relic-info-small" style="margin-top: 8px;">
                            <span>遗物: <span id="event-relics-count">0</span>件</span>
                            <button class="btn-small" onclick="game.showRelicsView()" style="margin-left: 10px;">⚡ 查看</button>
                        </div>
                    </div>
                </div>
                
                <div id="event-desc" style="margin-bottom: 16px;"></div>
                <div id="event-options" class="event-options" style="display:flex; flex-direction:column; gap:10px;"></div>
                <div class="event-actions" style="margin-top: 16px; text-align: center;">
                    <button class="btn-secondary" id="event-continue" style="display:none;">返回地图</button>
                </div>
            </div>
        </div>

        <!-- 卡牌包查看界面 -->
        <div id="deck-view-screen" class="screen">
            <div class="screen-content">
                <h2>卡牌包</h2>
                <div class="deck-info">
                    <p>总卡牌数: <span id="total-deck-count">0</span></p>
                </div>
                <div id="deck-cards-container" class="deck-cards-container">
                    <!-- 卡牌将在这里显示 -->
                </div>
                <div class="deck-actions">
                    <button class="btn-secondary" onclick="game.closeDeckView()">关闭</button>
                </div>
            </div>
        </div>

        <!-- 遗物查看界面 -->
        <div id="relics-view-screen" class="screen">
            <div class="screen-content">
                <h2>遗物</h2>
                <div class="deck-info">
                    <p>总遗物数: <span id="total-relics-count">0</span></p>
                </div>
                <div id="relics-container" class="relics-container">
                    <!-- 遗物将在这里显示 -->
                </div>
                <div class="deck-actions">
                    <button class="btn-secondary" onclick="game.closeRelicsView()">关闭</button>
                </div>
            </div>
        </div>

        <!-- 吾悦广场界面 -->
        <div id="shopping-screen" class="screen">
            <div class="screen-content">
                <h2>吾悦广场 - 商店</h2>
                
                <!-- 角色状态显示 -->
                <div class="shop-player-info">
                    <div class="player-avatar-container">
                        <img id="shop-player-avatar" src="" alt="角色头像" class="player-avatar">
                    </div>
                    <div class="player-stats">
                        <span class="health">❤️ <span id="shop-player-health">100</span>/<span id="shop-player-max-health">100</span></span>
                        <span class="energy">⚡ <span id="shop-player-energy">3</span></span>
                        <span class="gold">💰 <span id="shop-player-gold">0</span></span>
                    </div>
                    <div class="shop-stats-details">
                        <div class="stat-detail">
                            <span>力量: <span id="shop-player-strength">0</span></span>
                            <span>敏捷: <span id="shop-player-dexterity">0</span></span>
                            <span>智力: <span id="shop-player-intelligence">0</span></span>
                        </div>
                        <div class="deck-info-small">
                            <span>卡牌包: <span id="shop-deck-count">0</span>张</span>
                            <button class="btn-small" onclick="game.showDeckView()" style="margin-left: 10px;">📚 查看</button>
                        </div>
                        <div class="relic-info-small" style="margin-top: 8px;">
                            <span>遗物: <span id="shop-relics-count">0</span>件</span>
                            <button class="btn-small" onclick="game.showRelicsView()" style="margin-left: 10px;">⚡ 查看</button>
                        </div>
                    </div>
                </div>
                
                <div class="shop-content">
                    <div class="shop-section">
                        <h3>卡牌商店</h3>
                        <div id="card-shop" class="shop-items">
                            <!-- 卡牌商品将在这里显示 -->
                        </div>
                    </div>
                    <div class="shop-section">
                        <h3>遗物商店</h3>
                        <div id="relic-shop" class="shop-items">
                            <!-- 遗物商品将在这里显示 -->
                        </div>
                    </div>
                    <div class="shop-section">
                        <h3>药水商店</h3>
                        <div id="potion-shop" class="shop-items">
                            <!-- 药水商品将在这里显示 -->
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-secondary" id="leave-shop">离开商店</button>
            </div>
        </div>

        <!-- 战斗结果界面 -->
        <div id="battle-result" class="screen">
            <div class="result-content">
                <h2 id="result-title">战斗胜利!</h2>
                <div id="rewards" class="rewards">
                    <!-- 奖励将在这里显示 -->
                </div>
                <div class="result-actions">
                    <button class="btn-primary" id="continue-adventure">继续冒险</button>
                </div>
            </div>
        </div>

        <!-- 通关胜利界面 -->
        <div id="victory-screen" class="screen">
            <div class="victory-content">
                <h2>恭喜通关！</h2>
                <div id="victory-story" class="victory-story">
                    <!-- 通关剧情将显示在这里 -->
                </div>
                <div class="victory-score-block">
                    <div>通关得分</div>
                    <div class="victory-score-total"><span id="victory-score-total">0</span></div>
                    <ul id="victory-score-breakdown" class="victory-score-breakdown">
                        <!-- 计分明细 -->
                    </ul>
                </div>
                <div class="victory-actions">
                    <button class="btn-primary" id="victory-advance">晋升下一阶</button>
                    <button class="btn-secondary" id="victory-return">返回主菜单</button>
                </div>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="game-over" class="screen">
            <div class="game-over-content">
                <h2>游戏结束</h2>
                <p id="game-over-reason">你失败了...</p>
                <div class="final-stats">
                    <p>到达层数: <span id="final-floor">1</span></p>
                    <p>获得金币: <span id="final-gold">0</span></p>
                </div>
                <button class="btn-primary" id="restart-game">重新开始</button>
            </div>
        </div>

        <!-- 历史记录界面 -->
        <div id="logs-screen" class="screen">
            <div class="screen-content">
                <h2>历史记录</h2>
                <div class="logs-actions" style="margin-bottom: 10px; display: flex; gap: 8px;">
                    <button class="btn-secondary" id="logs-back">返回</button>
                    <button class="btn-secondary" id="logs-clear">清空记录</button>
                </div>
                <div id="logs-list" class="log-content" style="max-height: 60vh; overflow: auto;">
                    <!-- 历史记录条目将显示在这里 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 卡牌选择弹窗 -->
    <div id="card-choice-modal">
        <div class="card-choice-content">
            <div class="card-choice-title" id="card-choice-title">选择一张卡牌</div>
            <div id="card-choice-list" class="card-choice-list"></div>
            <div class="card-choice-actions">
                <button class="btn-secondary" id="card-choice-cancel">暂不选择</button>
            </div>
        </div>
    </div>

    <!-- 背景音乐 -->
    <audio id="battle-music" loop>
        <source src="sound/battle_background_music01.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 音效 -->
    <audio id="hit-sound" preload="auto">
        <source src="sound/hit_sound.mp3" type="audio/mpeg">
    </audio>
    <audio id="crit-sound" preload="auto">
        <source src="sound/crit_sound.mp3" type="audio/mpeg">
    </audio>
    <audio id="card-use-sound" preload="auto">
        <source src="sound/card_use.mp3" type="audio/mpeg">
    </audio>
    <audio id="enemy-death-sound" preload="auto">
        <source src="sound/enemy_death.mp3" type="audio/mpeg">
    </audio>
    <audio id="card-upgrade-sound" preload="auto">
        <source src="sound/card_upgrade.mp3" type="audio/mpeg">
    </audio>

    <script src="js/managers/BattleManager.js"></script>
    <script src="js/managers/EventManager.js"></script>
    <script src="js/game.js"></script>
    <script src="js/status.js"></script>
    <script src="js/characters.js"></script>
    <script src="js/cards.js"></script>
    <script src="js/enemies.js"></script>
    <script src="js/relics.js"></script>
    <script src="js/potions.js"></script>
    <script src="js/map.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
